<style lang="less" scoped>
  .steps-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    // text-align: center;
    padding: 20px;
  }
  
  .steps-action {
    margin-top: 24px;
  }
  
  .step2{
    .title{
      font-size: 24px;
      text-align: left;
      color: #02A84C;
    }
  }
  .tips{
    margin-top: 12px;
    width: 12rem;
    text-align: center;
  }
</style>
<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-steps :current="current" @change="onChange">
        <a-step v-for="item in steps" :key="item.title" :title="item.title" />
      </a-steps>
      <div class="steps-content">
        <div v-if="current==0">
          <a-form :label-col="labelCol" :wrapper-col="wrapperCol"
            labelAlign="left" layout="horizontal">
              <a-form-item
                label="选择金额"
              >
                <a-radio-group :default-value="value" button-style="solid" @change="changeValue">
                  <a-radio-button :value="50">
                    50元
                  </a-radio-button>
                  <a-radio-button :value="100">
                    100元
                  </a-radio-button>
                  <a-radio-button :value="200">
                    200元
                  </a-radio-button>
                  <a-radio-button :value="500">
                    500元
                  </a-radio-button>
                  <a-radio-button :value="1000">
                    1000元
                  </a-radio-button>
                  <a-radio-button :value="2000">
                    2000元
                  </a-radio-button>
                  <a-radio-button :value="5000">
                    5000元
                  </a-radio-button>
                </a-radio-group>
              </a-form-item>
              <a-form-item label="充值金额">
                <a-input style="width: 200px;" v-model="value" placeholder="请选择或添加充值金额" suffix="元"/>
              </a-form-item>
              
              <a-form-item>
                <a-button type="primary" @click="toCreateQRCodeBox">
                  生成充值二维码
                </a-button>
              </a-form-item>
            </a-form>
        </div>
        <div class="step2" v-if="current==1">
          <div class="title" style="margin-bottom: 20px;">收银台</div>
          <a-form :label-col="labelCol" :wrapper-col="wrapperCol"
            labelAlign="left" layout="horizontal">
              <!-- <a-form-item label="订单编号">
                -------------
              </a-form-item> -->
              <a-form-item label="支付金额">
                {{this.value}}
              </a-form-item>
              <a-form-item label="支付方式">
                <div style="display: flex;align-items: center;">
                  <a-icon type="wechat" two-tone-color="#02A84C" style="color:#02A84C;font-size: 18px;" theme="filled" /><span class="margL6">微信支付</span>
                  <!-- <a-icon type="alipay-circle" theme="filled" /><span>支付宝</span> -->
                </div>
              </a-form-item>
              <div>
                <div>
                  <canvas class="qrcode" id="qrCode-canvas"></canvas>
                </div>
                <div class="tips">打开手机微信扫一扫付款</div>
              </div>
            </a-form>
        </div>
        <div class="step3" v-if="current==2">
          第三步
        </div>
      </div>
      
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import QRCode from 'qrcode'
  // import moment from 'moment'
  import {
    // STable
  } from '@/components'
  export default {
    name: 'addMoney',
    components: {
    },
    data() {
      return {
        id:'',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
          md: { span: 2 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 },
          md: { span: 12 },
        },
        current: 0,
        value: 0,
        steps: [
          {
            title: '填写充值金额',
            // content: 'First-content',
          },
          {
            title: '扫码支付',
            // content: 'Second-content',
          },
          {
            title: '完成',
            // content: 'Last-content',
          },
        ],
      }
    },
    computed: {
      
    },
    created() {
      // this.GetSchoolRecursion()
      
    },
    methods: {
      createQrcode(){
        let canvas = document.getElementById('qrCode-canvas')
        let href = `http://zuyu.youmiyunguanjia.xyz/mobile/index.html#/recharge?price=${this.value}&id=${this.id}`
        QRCode.toCanvas(canvas, href, (error) => {
          if (error) {
            console.log(error)
          } else {
            canvas.style.width = '12rem'
            canvas.style.height = '12rem'
          }
        })
      },
      onChange(current) {
        if(!this.$myUtils.noTrim(this.value)){
          this.$message.error('请选择/填写充值金额')
          return
        }
        this.current = current;
      },
      toCreateQRCodeBox() {
        if(this.value==0){
          this.$message.info('请选择或填写充值金额')
          return
        }
        const params = {
          price: this.value,
          merchant_id: localStorage.getItem('merchant_id')
        }
        this.$api.MerorderRecharge(params).then(res=>{
          if(res.ret == 200){
            this.id = res.data
            this.next()
            this.$nextTick(function () {
               this.createQrcode()
            },500)
          }
        })
      },
      changeValue(val) {
        this.value = val.target.value
      },
      next() {
        this.current++;
      },
      prev() {
        this.current--;
      },
    },
  }
</script>
